{% extends 'base.html' %}

{% block main %}
<div class="container">
      <div class="row">
        <div class="col-lg-8 col-lg-offset-1 col-md-10">
        {% for post in posts.items %}
          <div class="post-preview">
            <a href="{{ url_for('main.post_detail', post_id=post.id) }}">
              <h2 class="post-title">
                {{ post.title }}
              </h2>
            </a>
              <h3 class="post-subtitle">
                {{ post.abstract }}
              </h3>
            <p class="post-meta">Posted by <a href="#">{{ post.author.username }}</a> on {{ moment(post.create_time).format('YYYY/MM/DD, h:mm a') }}</p>
            <p class="post-meta">category: <a href="#">{{ post.category }}</a></p>
            <p class="post-meta">Tags:{% for tag in post.tags %} <a href="#">{{ tag }}</a>{% endfor %}</p>
          </div>
          {% if not loop.last %}
          <hr>
          {% endif %}
          {% else %}
            <p class="post-subtitle">
                No articles found here
            </p>
        {% endfor %}
        <hr>
            <div class="clearfix">
            {% if posts.has_prev %}
                <a class="btn btn-primary float-in-left" href="?page={{ posts.prev_num }}
                        {%- if cur_category %}&category={{ cur_category }}{% endif %}
                        {%- if keywords %}&keywords={{ keywords }}{% endif %}
                        {%- if cur_tag %}&tag={{ cur_tag }}{% endif %}"> &larr;Previous Posts</a>
            {% endif %}
            {% if posts.has_next %}
                <a class="btn btn-primary float-in-right" href="?page={{ posts.next_num }}
                        {%- if cur_category %}&category={{ cur_category }}{% endif %}
                        {%- if cur_tag %}&tag={{ cur_tag }}{% endif %}">Older Posts &rarr;</a>
            {% endif %}
            </div>
        </div>
        <div class="col-lg-3 col-md-2">
            <h3>Search</h3>
            <hr/>
            <form id="search-form">
              <div class="form-group">
                <div class="input-group">
                  <input type="text" class="form-control" id="search" name="keywords" placeholder="search" value="{% if keywords %}{{ keywords }}{% endif %}">
                <div class="input-group-addon"><i class="fa fa-search"></i></div>
                </div>
              </div>
            </form>
            <br>

            <h3>Tags</h3>
            <hr/>
            {% for tag in tags %}
                <a href="?tag={{tag}}" class="post-tag">
                    {% if tag == cur_tag %}
                    <span class="label label-primary">
                        {{ tag }}
                        <small><span class="glyphicon glyphicon-remove small rm-filter" aria-hidden="true"></span></small>
                    </span>

                    {% else %}
                    <span class="label label-default">
                        {{ tag }}
                    </span>

                    {% endif %}
                </a>
                &nbsp;
            {% endfor %}


            <h3>Category</h3>
            <hr/>
            <div class="list-group">
                {% for category in cursor_for_category %}
                    {% if category and category.name %}
                        {% if cur_category == category.name %}
                            <a href="?category={{ category.name }}" class="list-group-item category-list active">{{ category.name }}
                            <small><span class="glyphicon glyphicon-remove small rm-filter" aria-hidden="true"></span></small>
                            <span class="badge">&nbsp;{{ category.count }}&nbsp;</span></a>
                        {% else %}
                            <a href="?category={{ category.name }}" class="list-group-item category-list ">{{ category.name }}
                            <span class="badge">&nbsp;{{ category.count }}&nbsp;</span></a>
                        {% endif %}
                    {% endif %}
                {% endfor %}
            </div>
        </div>
      </div>
    </div>
{% endblock %}

{% block js %}
<script type="text/javascript">
$('.rm-filter').on('click', function (event) {
    location.href = "/";
    return false;
  });
</script>
{% endblock %}